<template>
	<view class="uni-padding-wrap uni-common-mt">
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			站点管理
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:12px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			添加站点
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-add-circle-fill" style="color:#7800BE;font-size:26px;"></i>
				添加站点
			</view>
			<view class="r30">
				<button @click="addStation()">
					<i class="ri-shield-check-fill" style="color:#fff;font-size:12px;"></i>
					<!-- <i-icon size="20upx" color="#FFF" name="shield-check-fill"></i-icon> -->
					提交
				</button>
			</view>
		</view>
		<view class="p-table">
			<view class="h2">
				<i class="ri-article-line" style="color:#7800BE;font-size:14px;"></i>
				<!-- <i-icon size="26upx" color="#7800BE" name="movie-fill"></i-icon> -->
				基础信息
			</view>
			<view class="com">
				<view class="li bc">
					<view class="wz">站点名称</view>
					<view class="nr"><input type="text" v-model="villageName" placeholder="小区名称"
							style="width: 600px;" /></view>
				</view>
				<view class="li bc">
					<view class="wz">所在区域</view>
					<view class="nr">
						<picker mode="multiSelector" :range="region" range-key="name" :value="regionIndex"
							@change="pickerChange" @columnchange="pickerColumnchange" style="width: 600px;">
							<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
								<view class="bc">
									<text>{{regionStr}}</text>
									<i class="ri-arrow-right-s-line" style="color:#7800BE;font-size:18px;"></i>
									<!-- <i-icon size="26upx" color="#7800BE" name="arrow-right-s-line"></i-icon> -->
								</view>
								<text class="iconfont"></text>
							</view>
						</picker>
					</view>
				</view>
				<view class="li bc">
					<view class="wz">详细地址</view>
					<view class="nr"><input type="text" v-model="villageAddress" placeholder="站点详细地址"
							style="width: 600px;" /></view>
					<!-- <button type="button" :disabled="!villageAddress" @click="getLocation()">获取经纬度</button> -->
				</view>
				<!-- <view class="li bc">
					<view class="wz" style="margin-left:28px;">经度</view>
					<view class="nr">
						<input type="digit" v-model="longitude" placeholder="" style="width: 100px;" />
					</view>
					<view class="wz" style="margin-left:28px;">纬度</view>
					<view class="nr">
						<input type="digit" v-model="latitude" placeholder="" style="width: 100px;" />
					</view>
				</view> -->
				<view class="li bc">
					<view class="wz">入住户数</view>
					<view class="nr"><input type="number" v-model="occupancyNumber" placeholder="请输入户数"
							style="width: 300px;" /></view>
				</view>
				<view class="li bc">
					<view class="wz">所属物业</view>
					<view class="nr">
						<select v-model="villageProperty" style="width: 630px;">
							<option value="">请选择</option>
							<option v-for="(ke,ya) in wuyeList" :value="ke.name">{{ke.name}}</option>
						</select>
					</view>
				</view>
				<view class="li bc">
					<view class="wz">分配站长</view>
					<view class="nr">
						<select v-model="villageAgent" style="width: 630px;">
							<option value="">请选择</option>
							<option v-for="(kk,yy) in agentList" :value="kk.agentName">{{kk.agentName}}</option>
						</select>
					</view>
				</view>
				<view class="bc">
					<view class="wz">大门封面</view>
					<view class="nr">
						<span v-for="(img,no) in stationInfo.TitleImg" :key="no">
							<image style="display:inline-block;width:100px;height:100px;" :src="img.path"
								mode="aspectFill" @tap="ViewImage(img.path)"></image>
						</span>
						<view>
							<view class="solid">
								<text class='cuIcon-cameraadd' @click="addStationImg2()" style="cursor:pointer;">
									上传
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bc">
					<view class="wz">小区环境</view>
					<view class="nr">
						<span v-for="(img,no) in stationInfo.stationImgs" :key="no">
							<image style="display:inline-block;width:100px;height:100px;" :src="img.path"
								mode="aspectFill" @tap="ViewImage([img.path])"></image>
						</span>
						<view>
							<view class="solid">
								<text class='cuIcon-cameraadd' @click="addStationImg()" style="cursor:pointer;">
									批量上传
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="li bc">
					<view class="wz">收楼年份</view>
					<view class="nr">
						<!-- <input type="" v-model="stationInfo.completionDate" placeholder="收楼年份"
							style="width: 600px;" /> -->
						<picker mode="date" fields="year"
							@change="stationInfo.completionDate=$event.detail.value+'-01-01'">
							<view>{{stationInfo.completionDate||'收楼年份'}}</view>
						</picker>
					</view>
				</view>
				<view class="" style="width:100%;margin:20px 0;">
					<view class="wz" style="display:inline-block;vertical-align:top;">禁止行业</view>
					<view class="nr" style="display:inline-block;width:calc(100% - 200px);">
						<checkbox-group @change="stationInfo.disableIndustry=$event.detail.value">
							<label v-for="(item,no) in industryArr" :key="no"
								style="display:inline-block;margin-right:10px;">
								<checkbox :value="item" /><text>{{item}}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
			<!-- 摊位管理start -->
			<view class="bl">
				<view class="h2">
					<i class="ri-article-line" style="color:#7800BE;font-size:18px;"></i>
					<!-- <i-icon size="26upx" color="#7800BE" name="movie-fill"></i-icon> -->
					摊位管理
					<text style="font:12px sans-serif;margin:12px auto 0 10px;color:#666;">(注：*号字段必填，图片大小限制2Mb)</text>
				</view>
				<view class="">
					<button
						@click="marketBoothArray.push({stationId:'',name:'',location:'',area:'',price:'',unit:'',openingTime:'',closingTime:'',imgs:[],imgsPath:[],disableIndustry:[],propertyPrice:''})">
						<i class="ri-add-circle-fill" style="color:#fff;font-size:18px;"></i>
						<!-- <i-icon size="25upx" color="#FFF" name="add-circle-fill"></i-icon> -->
						添加
					</button>
					<!-- <button @click="saveMarketBooth({stationId:'1000001'})">提交（测试）</button> -->
				</view>
			</view>
			<view class="p-table">
				<table class="pure-table pure-table-horizontal">
					<tr>
						<th>
							<font color=red>*</font>封面
						</th>
						<th>
							<font color=red>*</font>名称
						</th>
						<th>
							<font color=red>*</font>摆展位置
						</th>
						<th>
							<font color=red>*</font>面积/m²
						</th>
						<th>
							<font color=red>*</font>摆展时间
						</th>
						<th>
							<font color=red>*</font>物业价格/天
						</th>
						<th>
							<font color=red>*</font>桂民价格/天
						</th>
						<th>操作</th>
					</tr>
					<tr v-for="(booth,index) in marketBoothArray" :key="index">
						<td>
							<view>
								<view class="bg-img"
									style="display:flex;width:100px;height:120px;overflow-x:auto;overflow-y:hidden;margin:0 auto;"
									v-if="booth.imgsPath && booth.imgsPath.length>0">
									<span v-for="(path,no) in booth.imgsPath" :key="no">
										<image style="display:inline-block;width:100px;height:100px;" :src="path"
											mode="aspectFill" @tap="ViewImage(booth.imgsPath)"></image>
									</span>
								</view>
								<view>
									<view class="solid">
										<text class='cuIcon-cameraadd' @click="addBoothImg(index)"
											style="cursor:pointer;">
											上传封面
										</text>
									</view>
								</view>
							</view>
						</td>
						<td>
							<view class="bz">
								<input type="text" v-model="booth.name" placeholder="名称" />
							</view>
						</td>
						<td>
							<view class="bz">
								<input type="text" v-model="booth.location" placeholder="请输入摆展位置,如:正门广场A区"
									style="width: 90%;" />
							</view>
						</td>
						<td>
							<view class="bz">
								<input type="number" v-model="booth.area" placeholder="预估面积,如:3m²" />
							</view>
						</td>
						<td>
							<view class="bz">
								<picker mode="time" @change="TimePicker($event,booth,1)">
									<view v-html="booth.openingTime||`<font color=#888>开始时间</font>`"></view>
								</picker>
								至
								<picker mode="time" @change="TimePicker($event,booth,2)">
									<view v-html="booth.closingTime||`<font color=#888>结束时间</font>`"></view>
								</picker>
							</view>
						</td>

						<td>
							<view class="bz">
								<input type="digit" v-model="booth.propertyPrice" placeholder="物业价格(元/天)" />
							</view>
						</td>
						<td>
							<view class="bz">
								<input type="digit" v-model="booth.price" placeholder="桂民价格(元/天)" />
							</view>
						</td>
						<td>
							<view class="bz">
								<button @click="delItem(index)" class="b-dell">
									<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>删除
								</button>
							</view>
						</td>
					</tr>
					<view class="bz" style="width: 100%;">
					</view>
				</table>
			</view>
			<!-- 摊位管理end -->
			<view class="bl">
				<view class="h2">
					<i class="ri-article-line" style="color:#7800BE;font-size:18px;"></i>
					<!-- <i-icon size="26upx" color="#7800BE" name="movie-fill"></i-icon> -->
					常规服务
				</view>
				<view class="">
					<button @click="addLIST()">
						<i class="ri-add-circle-fill" style="color:#fff;font-size:18px;"></i>
						<!-- <i-icon size="25upx" color="#FFF" name="add-circle-fill"></i-icon> -->
						添加
					</button>
				</view>
			</view>
			<view class="p-table">
				<table class="pure-table pure-table-horizontal">
					<tr>
						<th>封面</th>
						<th>服务名称</th>
						<th>收费价格</th>
						<th>免费服务时间</th>
						<th>操作</th>
					</tr>
					<tr v-for="item in serveList">
						<td>
							<view>
								<view class="bg-img" style="width: 100px; height: 100px;" v-if="item.yyPath != ''">
									<button @click="DelImg(item.index)">X</button>
									<image style="width: 100px; height: 100px;" :src="item.yyPath[0]" mode="aspectFill"
										@tap="ViewImage(item.yyPath)">
									</image>
								</view>
								<view v-else>
									<view class="solid" @tap="ChooseImage(item.index)">
										<text class='cuIcon-cameraadd'>上传封面</text>
									</view>
								</view>
							</view>
						</td>
						<td>
							<view class="bz">
								<input type="text" v-model="item.name" placeholder="名称" style="width: 500px;" />
							</view>
						</td>
						<td>
							<view class="bz">
								<input type="text" v-model="item.price" placeholder="价格" style="width: 300px;" />
							</view>
						</td>
						<td>
							<view v-if="item.freeDate == ''">
								<radio-group @change="radioChange" @click="cgIndex = item.index">
									<label class="radio" style="margin-right: 15px;">
										<radio value="r1" color="#7800BE" :checked="kaiqi" style="margin-right: 5px;" />
										开启
									</label>
									<label class="radio">
										<radio value="r2" color="#DC2626" :checked="jinyon = 1?true:false"
											style="margin-right: 5px;" />禁用
									</label>
								</radio-group>
							</view>
							<view v-else>
								{{item.freeDate}}
							</view>


							<view v-if="state=='true'" class="p-tkb">
								<view class="p-tkh"></view>
								<view class="p-tk">
									<view class="tb">
										<view class="titem">
											<i class="ri-pencil-fill" style="color:#7800BE;font-size:12px;"></i>
											<!-- <i-icon size="20upx" color="#7800BE" name="pencil-fill" class="r10"></i-icon> -->
											选择免费日
										</view>
										<i class="ri-close-circle-fill" style="color:#f73164;font-size:18px;"
											@click="state=false,jinyon = 1"></i>
										<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill"
											@click="state=false,jinyon = 1"></i-icon> -->
									</view>
									<view class="com">
										<view class="li bc">
											<view v-if="sp==cgIndex">
												<view v-if='ss == 1'>
													<picker mode="date" :id="cgIndex" :value="sdate" :start="startDate"
														:end="endDate" @change="bindDateChange">
														<view class="uni-input">选择日期:{{item.freeDate}}</view>
													</picker>
													<i class="ri-close-circle-fill"
														style="color:#f73164;font-size:18px;" @click="sp=null"></i>
													<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill"
														@click="sp=null"></i-icon> -->
												</view>
												<view v-else-if="ss == 2">
													<select v-model="xqData" @change="xingQi()">
														<option value="星期一">每周一</option>
														<option value="星期二">每周二</option>
														<option value="星期三">每周三</option>
														<option value="星期四">每周四</option>
														<option value="星期五">每周五</option>
														<option value="星期六">每周六</option>
														<option value="星期日">每周天</option>
													</select>
													<i class="ri-close-circle-fill"
														style="color:#f73164;font-size:18px;"
														@click="sp=null,item.freeDate = ''"></i>
													<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill"
														@click="sp=null,item.freeDate = ''"></i-icon> -->
												</view>
											</view>
											<!-- 显示 -->
											<view v-else>
												<view>
													<button @click="sp=cgIndex,ss=1">特定某天</button>
													<button @click="sp=cgIndex,ss=2">每周星期</button>
												</view>
											</view>
										</view>
										<view class="bc" style="margin-left: 90px;">
											<button type="button" @click="state=false" style="width: 100px;">
												<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
												<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
												确定
											</button>
										</view>
									</view>
								</view>
							</view>

						</td>
						<td>
							<view class="bz"><button @click="deltLIST(item.index)" style="width: 100px" class="b-dell">
									<i class="ri-delete-bin-line" style="color:#333;font-size:12px;"></i>
									<!-- <i-icon size="20upx" color="#333" name="delete-bin-line"></i-icon> -->
									删除
								</button></view>
						</td>
					</tr>
					<view class="bz" style="width: 100%;">
					</view>
				</table>
			</view>
			<view class="h2">
				<i class="ri-article-line" style="color:#7800BE;font-size:18px;"></i>
				<!-- <i-icon size="26upx" color="#7800BE" name="movie-fill"></i-icon> -->
				废旧回收
			</view>
			<view class="p-table">
				<table class="pure-table pure-table-horizontal">
					<tr>
						<th>选择</th>
						<th>一级名称</th>
						<th>二级名称</th>
						<th>回收价格（人民币）</th>
						<th>单位</th>
					</tr>
					<tr v-for="key in lajiTwoList" v-if='key.length != 0'>
						<td>
							<checkbox-group @change="lajicheckboxChange(key)">
								<checkbox :checked="key.checked"></checkbox>
							</checkbox-group>
						</td>
						<td>{{key.name}}</td>
						<td>{{key.twoName}}</td>
						<td>
							<view class="bz">
								<input type="text" placeholder="价格" v-model="key.price" style="width: 100px;" />
							</view>
						</td>
						<td>
							<view class="bz">
								<select v-model="key.unit">
									<option value="两">两</option>
									<option value="斤">斤</option>
									<option value="公斤">公斤</option>
									<option value="吨">吨</option>
								</select>
							</view>
						</td>
					</tr>
					<tr v-else>
						暂无数据，请前往废旧管理添加
					</tr>
				</table>
			</view>
		</view>
		<view class="footer">
			<p><text style="margin-right: 5upx;">Copyright © 2022 桂民社区服务站</text>
				<text>Powered by 奇果科技</text>
			</p>
		</view>
		<view v-if="cropper.img"
			style="display:block;width:900px;height:700px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border:1px solid #888;">
			<VueCropper ref="cropper" :img="cropper.img" :outputSize="cropper.outputSize"
				:outputType="cropper.outputType" :info="cropper.info" :canScale="cropper.canScale"
				:autoCrop="cropper.autoCrop" :autoCropWidth="cropper.autoCropWidth"
				:autoCropHeight="cropper.autoCropHeight" :fixed="cropper.fixed" :fixedNumber="cropper.fixedNumber"
				:full="cropper.full" :fixedBox="cropper.fixedBox" :canMove="cropper.canMove"
				:canMoveBox="cropper.canMoveBox" :original="cropper.original" :centerBox="cropper.centerBox"
				:height="cropper.height" :infoTrue="cropper.infoTrue" :maxImgSize="cropper.maxImgSize"
				:enlarge="cropper.enlarge" :mode="cropper.mode" style="height:90%;">
				组件加载失败
			</VueCropper>
			<view class="">
				<button type="button" @click="getCropImage">截图</button>
			</view>
		</view>

	</view>
</template>

<script>
	import region from '../../components/k-region/pca-code.json';
	import axios from 'axios';
	import {
		VueCropper
	} from 'vue-cropper';
	export default {
		components: {
			VueCropper
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				cropper: {
					boothIndex: '',
					isShow: true,
					img: '', //裁剪图片的地址
					outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
					outputType: 'jpeg', //裁剪生成图片的格式（jpeg || png || webp）
					info: true, //图片大小信息
					canScale: true, //图片是否允许滚轮缩放
					autoCrop: true, //是否默认生成截图框
					autoCropWidth: 300, //默认生成截图框宽度
					autoCropHeight: 300, //默认生成截图框高度
					fixed: true, //是否开启截图框宽高固定比例
					fixedNumber: [1, 1], //截图框的宽高比例
					full: false, //false按原比例裁切图片，不失真
					fixedBox: false, //固定截图框大小，不允许改变
					canMove: false, //上传图片是否可以移动
					canMoveBox: true, //截图框能否拖动
					original: false, //上传图片按照原始比例渲染
					centerBox: false, //截图框是否被限制在图片里面
					height: true, //是否按照设备的dpr 输出等比例图片
					infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
					maxImgSize: 3000, //限制图片最大宽度和高度
					enlarge: 1, //图片根据截图框输出比例倍数
					mode: '230px 150px' //图片默认渲染方式
				},
				kaiqi: false,
				jinyon: 1,
				// 原数组
				oldRegion: region,
				cgIndex: '',
				xqData: '',
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],
				// 省市区字符串
				regionStr: '请选择省市区',

				state: false,
				checked: false,
				sdate: '',
				ss: null,
				sp: null,
				oneName: '',
				date: currentDate,
				zdPrice: '', //站点价格
				zdUnit: '', //站点单位
				villageName: '', //站点名称
				villageAddress: '', //站点地址
				villageProperty: '', //站点物业
				villageAgent: '', //站长
				villagePrice: '', //站点价格
				imgList: [],
				serveList: [{
					index: 0,
					id: '',
					notBase64ImgPath: '',
					yyPath: '',
					name: '',
					price: '',
					freeDate: ""
				}], //显示服务表
				serList: [], //添加站点服务数据表
				agentList: [], //站长表
				wuyeList: [], //物业表
				lajiOneList: [], //垃圾一
				lajiTwoList: [], //垃圾二
				lajiAddList: [], //垃圾添加数据表
				certBackUrl: '',
				occupancyNumber: 0,
				longitude: '',
				latitude: '',
				stationInfo: {
					//环境封面
					stationImgs: [],
					//竣工时间
					completionDate: '',
					//禁用行业
					disableIndustry: [],
					//首页封面
					TitleImg: ''
				},
				//小区摊位列表
				marketBoothArray: [{
					stationId: '',
					name: '',
					location: '',
					area: '',
					price: '',
					unit: '',
					openingTime: '',
					closingTime: '',
					imgs: [],
					imgsPath: [],
					disableIndustry: [],
					propertyPrice: ''
				}],
				// 行业
				industryArr: ["地产", "中介", "金融", "保险", "银行", "建材", "装修", "家居", "家电", "医美", "美容", "保健", "医院", "口腔", "眼科",
					"养老", "快消", "食品", "酒水", "教育", "通信", "汽车", "电商", "其他"
				],
				CropperTool: {

				}
			}
		},
		props: {
			// 组件高度
			height: {
				type: [Number],
				default: 92
			},
			// 组件宽度
			width: {
				type: [Number],
				default: 710
			},
			// 省id
			previnceId: {
				type: [Number],
				default: 11
			},
			// 城市id
			cityId: {
				type: [Number],
				default: 1101
			},
			// 县区id
			countyId: {
				type: [Number],
				default: 110101
			},
			// 是否是为修改(true为修改)
			isRevise: {
				type: [Boolean],
				default: false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//获取展位截图
			getCropImage() {
				let that = this
				this.$refs.cropper.getCropBlob(blob => {
					let index = that.cropper.boothIndex
					let file = new window.File([blob], "img" + index + ".jpg", {
						type: blob.type
					})
					file['path'] = window.URL.createObjectURL(file)
					// console.log(file)
					that.marketBoothArray[index].imgs = []
					that.marketBoothArray[index].imgsPath = []
					that.marketBoothArray[index].imgs.push(file)
					that.marketBoothArray[index].imgsPath.push(file.path)
					that.cropper.boothIndex = ''
					that.cropper.img = ''
				})
			},
			// 上传小区环境图片
			async uploadStationImgs(stationId) {
				this.stationInfo.stationImgs.unshift(this.stationInfo.TitleImg[0])
				//console.log(that.stationInfo.stationImgs)
				if (!stationId || !(this.stationInfo.stationImgs instanceof Array) || this.stationInfo.stationImgs
					.length == 0) {
					return
				}
				let that = this
				let imgArr = this.stationInfo.stationImgs.map((value, index) => {
					return {
						name: 'files',
						uri: value.path
					}
				});
				// console.log(imgArr, "============================")
				await uni.uploadFile({
					url: that.baseURL + "/guiminSite/saveStationImgs/" + stationId,
					header: {
						// "Content-Type": "multipart/form-data",
						'token': uni.getStorageSync('token')
					},
					files: imgArr,
					name: 'files',
					fileType: 'image',
					success: (res) => {
						console.log('uploadStationImgs:', res)
					},
					fail(e) {
						console.error(e)
					}
				})
			},
			//获取经纬度
			getLocation(city) {
				let that = this
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?', {
						key: 'GJYBZ-2RP6X-5ZF42-TGCLS-6MUGS-TDF5J',
						address: this.villageAddress,
						output: 'jsonp'
					})
					.then((res) => {
						console.log("经纬度：", res)
						that.latitude = res.result.location.lat;
						that.longitude = res.result.location.lng;
					})
					.catch((err) => {
						console.warn(err);
					});
			},
			//添加封面图片
			addStationImg2() {
				let that = this
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						res.tempFiles
						that.stationInfo.TitleImg = []
						for (let file of res.tempFiles) {
							if (file.size / 1024 <= 2048) {
								that.stationInfo.TitleImg.push(file)
							}
						}
					}
				});
			},
			//添加小区图片
			addStationImg() {
				let that = this
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						res.tempFiles
						that.stationInfo.stationImgs = []
						for (let file of res.tempFiles) {
							if (file.size / 1024 <= 2048) {
								that.stationInfo.stationImgs.push(file)
							}
						}
						//that.stationInfo.stationImgs.unshift(that.stationInfo.TitleImg[0])
					}
				});
			},
			//删除摊位
			delItem(index) {
				let arr = [];
				for (let i = 0; i < this.marketBoothArray.length; i++) {
					if (i == index) {
						continue;
					}
					arr.push(this.marketBoothArray[i]);
				}
				this.marketBoothArray = arr
			},
			//时间选择器
			TimePicker(e, booth, k) {
				if (k === 1) {
					booth['openingTime'] = e.detail.value
				} else if (k === 2) {
					booth['closingTime'] = e.detail.value
				}
			},
			//添加摊位图片
			addBoothImg(index) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						// console.log(res)
						that.marketBoothArray[index]['imgs'] = []
						that.marketBoothArray[index]['imgsPath'] = []
						for (let file of res.tempFiles) {
							if (file.size / 1024 <= 2048) {
								that.marketBoothArray[index]['imgs'].push(file)
								that.marketBoothArray[index]['imgsPath'].push(file.path)
								if (!that.cropper.img) {
									that.cropper.img = file.path;
									that.cropper.boothIndex = index;
								}
							} else {
								uni.showToast({
									title: "图片不能大于2M",
									icon: 'none',
									duration: 3000
								})
							}
						}
					}
				});
			},
			//添加摊位
			saveMarketBooth: async function(param) {
				param = param || {}
				let that = this
				if (this.marketBoothArray instanceof Array && this.marketBoothArray.length > 0) {
					let formDataList = []
					let showMsg = function(mesage) {
						uni.showToast({
							title: mesage,
							icon: 'none',
							duration: 3000
						})
					}
					let _judge = {
						'stationId': "站点id不能为空",
						'name': "展位名称不能为空",
						'location': "位置不能为空",
						'area': "面积不能为空",
						'price': "单价不能为空",
						'openingTime': "开放时间不能为空",
						'closingTime': "关闭时间不能为空",
						'propertyPrice': "物业单价不能为空"
					};
					//校验数据
					for (let booth of this.marketBoothArray) {
						//初始化信息
						booth.stationId = param.stationId
						booth.unit = "元/天"
						//新建表单
						let formData = new window.FormData();
						for (let key in _judge) {
							if (booth[key]) formData.append(key, booth[key]);
							else {
								showMsg(_judge[key]);
								return
							}
						}
						if (booth.unit) formData.append('unit', booth.unit);
						else {
							formData.append('unit', "元/天")
						}
						if (booth.disableIndustry.length > 0) {
							formData.append('disableIndustry', booth.disableIndustry.toString());
						}
						for (let img of booth.imgs) {
							formData.append('imgFiles', img);
						}
						formDataList.push(formData)
						// console.log("待发送数据：", booth, formData)
					}
					let sendDateFn = async function(formData) {
						await axios.post(that.baseURL + '/marketBooth/add', formData, {
							headers: {
								'Content-Type': 'multipart/form-data',
								'token': uni.getStorageSync('token')
							}
						}).then((response) => {
							uni.hideLoading()
							if (response.status == 200) {
								let data = response.data,
									msg;
								if (data.code == 0 || data.success == true) {
									msg = '摊位添加成功'
								} else {
									msg = '摊位添加失败'
								}
								uni.showToast({
									title: data.message || msg,
									icon: 'none',
									duration: 3000
								})
							} else {
								uni.showToast({
									title: '网络异常：' + response.statusText,
									icon: 'error',
									duration: 3000
								})
								console.error(response)
							}
						}).catch((e) => {
							uni.hideLoading()
							uni.showToast({
								title: '网络连接超时',
								icon: 'error',
								duration: 3000
							})
							console.error(e)
						});
					};
					let temp_no = 1
					for (let item of formDataList) {
						uni.showLoading({
							title: "正在添加摊位" + temp_no
						})
						temp_no++;
						await sendDateFn(item)
					}
				}
			},
			//选择星期
			xingQi() {
				for (let i in this.serveList) {
					let ti = this.serveList[i];
					if (ti.index == this.cgIndex) {
						ti.freeDate = this.xqData;
					}
				}
			},
			//删除服务模块
			deltLIST(id) {
				let array = [];
				let key = 0;
				let isExist = false;
				for (let index in this.serveList) {
					if (this.serveList[index].index != id) {
						this.serveList[index].index = key;
						key++;
						array.push(this.serveList[index]);
					} else if (this.serveList[index].index == id) {
						isExist = true;
					}
				}
				if (isExist) {
					this.serveList = array;
				} else {
					uni.showToast({
						title: '删除的模块不存在',
						icon: 'error',
						duration: 2500
					})
				}
			},
			//添加服务模块
			addLIST() {
				let length = this.serveList.length;
				this.serveList.push({
					index: length,
					id: '',
					notBase64ImgPath: '',
					yyPath: '',
					name: '',
					price: '',
					freeDate: ""
				});
			},
			//上传图片
			ChooseImage(index) {
				let _this = this;
				uni.chooseImage({
					count: 10, //默认9
					crop: {
						'width': 40,
						'height': 50
					},
					//sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

					success: (res) => {
						for (let i in this.serveList) {
							if (this.serveList[i].index == index) {
								this.serveList[i].yyPath = res.tempFilePaths;
							}
						}
						// if (this.imgList.length != 0) {
						// 	this.imgList = this.imgList.concat(res.tempFilePaths)
						// } else {
						// 	this.imgList = res.tempFilePaths
						// }
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: _this.baseURL + '/guiminService/upload/pic?name=' + _this.villageName,
							header: {
								'token': uni.getStorageSync('token')

							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: function(uploadFileRes) {
								//console.log(uploadFileRes)
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									//console.log(fileData.data.src);
									_this.certBackUrl = fileData.data.src
									for (let i in _this.serveList) {
										if (_this.serveList[i].index == index) {
											_this.serveList[i].notBase64ImgPath = fileData.data
												.src;
										}
									}
								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList = [];
								}
							},
							fail: function(err) {
								console.log("请求失败\n" + JSON.stringify(err))
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			ViewImage(e) {
				console.log(e)
				uni.previewImage({
					urls: e
				});
			},
			//删除
			DelImg(leng) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							for (let i in this.serveList) {
								let thislist = this.serveList[i];
								if (thislist.index == leng) {
									thislist.yyPath = '';
									thislist.notBase64ImgPath = '';
								}
							}
						}
					}
				})
			},
			//添加服务状态选择
			radioChange(e) {
				console.log(e)
				if (e.detail.value == 'r1') {
					this.state = 'true'
				}
				if (e.detail.value == 'r2') {
					this.state = 'false'
				}
				console.log(this.state)
			},

			/**
			 * 免费服务类型
			 * @param {Object} id
			 */
			ferr(id, ss) {
				//console.log(id)
				this.sp = id;
				//console.log(this.sp)
				this.ss = ss;
				if (ss == 2) {
					id.freeDate = '';
				}

			},
			/**
			 * 日期组件
			 * @param {Object} e
			 */
			bindDateChange: function(e) {
				console.log(e)

				let vd = e.target.value;
				this.sdate = vd;
				for (let i in this.serveList) {
					let ti = this.serveList[i];
					if (ti.index == e.target.id) {
						ti.freeDate = vd;
					}
				}

				console.log(this.sdate)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			/**
			 * 省市区三级联动
			 * @param {Object} e
			 */
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].name + this.region[1][this.regionIndex[1]].name +
					this.region[2][this.regionIndex[2]].name;
				console.log(this.regionStr);
				// 组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]].code,
					this.region[
						2][this.regionIndex[2]].code
				]);
			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)

				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			},
			/**
			 * 添加站点
			 */
			addStation: function() {
				let that = this
				if (this.villageName == '') {
					uni.showToast({
						title: '站点名称未填',
						icon: 'error'
					})
					return;
				}
				if (this.villageAddress == '') {
					uni.showToast({
						title: '站点地址未填',
						icon: 'error'
					})
					return;
				}
				if (this.villageProperty == '') {
					uni.showToast({
						title: '站点物业未填',
						icon: 'error'
					})
					return;
				}
				if (this.villageAgent == '') {
					uni.showToast({
						title: '站长未选择',
						icon: 'error'
					})
					return;
				}
				if (this.regionStr == '请选择省市区' || this.regionStr == '') {
					uni.showToast({
						title: '请选择所在区域'
					})
					return;
				}
				let disableIndustry = this.stationInfo.disableIndustry;
				let reqData = {
					'villageName': this.villageName, //站点名称
					'villageAgent': this.villageAgent, //分配站长
					'villageAddress': this.villageAddress, //站点地址
					'area': this.regionStr,
					'villageProperty': this.villageProperty, //所属物业
					'serveLists': this.serveList, //常规服务
					'recycleLists': this.lajiAddList, //废旧回收
					'occupancyNumber': this.occupancyNumber,
					'completionDate': this.stationInfo.completionDate || null, //收楼年份
					'disableIndustry': disableIndustry.length > 0 ? disableIndustry.toString() : null //禁止行业
				}
				if (this.longitude) reqData['longitude'] = this.longitude;
				if (this.latitude) reqData['latitude'] = this.latitude;
				uni.showLoading({
					title: '添加中...'
				})
				uni.request({
					url: this.baseURL + '/guiminSite/add',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					data: reqData,
					success: async (res) => {
						console.log(res)
						if (res.data.success == true) {
							uni.hideLoading();
							uni.showToast({
								title: '添加成功',
								duration: 2500,
								icon: 'loading'
							})
							try {
								let _param = JSON.parse(res.data.data)
								//保存摊位
								await that.saveMarketBooth(_param)
								await that.uploadStationImgs(_param['stationId'])
							} catch (e) {
								//TODO handle the exception
							}
							setTimeout(function() {
								uni.redirectTo({
									url: "./station"
								})
							}, 4000);
						} else {
							uni.hideLoading();
							console.log(res)
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.log(err)
						setTimeout(function() {
							uni.redirectTo({
								url: "./station"
							})
						}, 2500);
					}
				})
			},
			/**
			 * 添加服务
			 * @param {Object} e
			 */
			checkboxChange: function(e) {
				let data = e //JSON.parse(e);
				data.checked = !data.checked;
				if (data.checked == true) {
					this.serList.push(data);
					console.log(JSON.stringify(this.serList))
				} else {
					for (let y in this.serList) {
						let it = this.serList[y];
						if (it.id == data.id) {
							var index = this.serList.findIndex(item => item.id == it.id)
							console.log(index)
							this.serList.splice(index, 1);
						}
					}
					console.log(JSON.stringify(this.serList))
				}
			},
			/**
			 * 添加废旧回收服务
			 * @param {Object} e
			 */
			lajicheckboxChange: function(e) {
				let data = e //JSON.parse(e);
				data.checked = !data.checked;
				if (data.checked == true) {
					this.lajiAddList.push(data);
					console.log(JSON.stringify(this.lajiAddList))
				} else {
					for (let y in this.lajiAddList) {
						let it = this.lajiAddList[y];
						if (it.id == data.id) {
							var index = this.lajiAddList.findIndex(item => item.id == it.id)
							console.log(index)
							this.lajiAddList.splice(index, 1);
						}
					}
					console.log(JSON.stringify(this.lajiAddList))
				}
			},

			/**
			 * 获取服务列表
			 */
			getServeList: function() {
				let th_is = this;
				uni.request({
					url: th_is.baseURL + '/guiminService/list/f',
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success(res) {
						//console.log(res);
						uni.hideLoading()
						let data = res.data;
						if (data.success == true) {
							let va = data.data; //写入服务表
							///console.log(va);
							for (var i = 0, lenI = va.length; i < lenI; ++i) {
								th_is.serveList.push(va[i]);
								//console.log(va[i]);
							}
							//console.log(JSON.stringify(th_is.serveList));
						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'none'
							})
						}
					},
					fail: (e) => {
						console.warn(e)
						uni.hideLoading()
					}
				})
			},
			/**
			 * 获取废旧回收一级数据
			 */
			getLajiOne() {
				let tis = this;
				uni.request({
					url: tis.baseURL + "/Recycle/list/one",
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						//console.log(res)
						if (res.data.success == true) {
							let laji = res.data.data
							for (var i = 0, lenI = laji.length; i < lenI; ++i) {
								tis.lajiOneList.push(laji[i]);
							}
							//console.log(tis.lajiOneList)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						console.warn(err)
					}
				})
			},
			/**
			 * 获取废旧回收二级数据
			 */
			getLajiTwo() {
				let this_ = this;
				uni.request({
					url: this_.baseURL + "/Recycle/list/two",
					method: 'POST',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						//console.log(res)
						if (res.data.success == true) {
							let lajitwo = res.data.data
							for (var i = 0, lenI = lajitwo.length; i < lenI; ++i) {
								this_.lajiTwoList.push(lajitwo[i]);
							}

						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error'
							})
						}
					},
					fail: (err) => {
						console.warn(err)
					}
				})
			},
			/**
			 * 获取物业列表
			 */
			getWuyeList: function(current, size) {
				current = current || 1;
				size = size || 10;
				let ts = this;
				uni.request({
					url: ts.baseURL + '/property/list?current=' + current + '&size=' + size,
					method: 'GET',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success(res) {
						//console.log(res);
						uni.hideLoading()
						let data = res.data;
						if (data.code == 0) {
							let rec = data.data.records;
							//console.log(aa)
							for (let key in rec) {
								ts.wuyeList.push(rec[key]);
							}
						} else {
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
						}
					},
					fail: (e) => {
						console.warn(e)
						uni.hideLoading()
					}
				})
			},
			/**
			 * 获取站长列表
			 */
			getAgentList: function() {
				let _tis = this;
				uni.request({
					url: _tis.baseURL + '/agent/list?current=1&size=10',
					method: 'GET',
					header: {
						'content-type': 'application/json;carset=utf-8',
						'token': uni.getStorageSync('token')
					},
					success(res) {
						//console.log(res);
						uni.hideLoading()
						let data = res.data;
						if (data.code == 0) {
							data = data.data
							let aa = data.records;
							//console.log(aa)
							for (let key in aa) {
								//console.log('===========================',aa[key]);
								_tis.agentList.push(aa[key]);
							}
							//console.log(_tis.agentList);
						} else {
							uni.showToast({
								title: data.msg || data.message,
								icon: 'none'
							})
						}
					},
					fail: (e) => {
						console.warn(e)
						uni.hideLoading()
					}
				})
			}
		},
		created() {
			let provinceArr = [];
			let cityArr = [];

			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			// console.log(provinceArr);
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code) {
					this.regionIndex[2] = index;
				}
			})
			if (this.isRevise) {
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;
			} else {
				this.regionStr = '请选择省市区';
			}
		},
		onLoad: function() {
			//this.getServeList(); //获取常规服务
			this.getAgentList(); //获取站长列表
			this.getWuyeList(); //获取物业列表
			//this.getLajiOne(); //获取废旧回收一级
			this.getLajiTwo(); //获取废旧回收二级

		}
	}
</script>
<style>
	.p-checkbox {
		display: none;
		position: absolute;
		background-color: #fff;
		border: 1px solid #cccc;
		padding: 10px;
	}

	*:hover>.p-checkbox {
		display: block;
		z-index: 10;
		height: 300px;
		overflow-y: auto;
	}
</style>
